<script setup lang="ts">
import { useWebSocketStore } from '/@/store'
import { storeToRefs } from 'pinia'

const webSocketStore = useWebSocketStore()
const {
  currentMemberList,
  currentGroupMember,
  currentGroup,
  currentContact,
  currentAllMessageList,
} = storeToRefs(webSocketStore)
</script>

<template>
  <el-container class="member-container">
    <el-header height="60px">
      <el-row class="card-header">
        <span class="online">在线人数:{{ currentGroup.onlineNum }}</span>
        <el-button class="button" size="small" type="primary" bg
          >邀请好友
        </el-button>
      </el-row>
    </el-header>
    <el-main>
      <ul class="infinite-list">
        <li
          class="infinite-list-li"
          v-for="(item, index) in currentGroupMember"
          :key="index"
        >
          <div class="member-avator-container">
            <el-avatar
              class="member-avator"
              :size="36"
              :src="item.avatar"
            ></el-avatar>
            <i v-if="item.activeStatus === 1"></i>
          </div>
          <span>{{ item.username }}</span>
        </li>
      </ul>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.member-container {
  height: calc(100vh - 120px);
  overflow: auto;
  background-color: #f8f9fa;

  .el-header {
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #e6e6e6;

      .online {
        font-size: 14px;
        color: #606266;
        font-weight: 500;
      }

      .button {
        margin: 0;
        padding: 8px 20px;
        border-radius: 20px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .el-main {
    padding: 20px;

    .infinite-list {
      padding: 0;
      margin: 0;
      list-style: none;

      .infinite-list-li {
        margin-bottom: 16px;
        padding: 8px 12px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

        &:hover {
          transform: translateX(4px);
          background-color: #f0f7ff;
        }

        .member-avator-container {
          position: relative;
          margin-right: 12px;

          i {
            position: absolute;
            right: -2px;
            bottom: -2px;
            width: 10px;
            height: 10px;
            background-color: #67c23a;
            border: 2px solid #fff;
            border-radius: 50%;
            box-shadow: 0 0 0 1px #67c23a;
          }

          .member-avator {
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }
        }

        span {
          font-size: 14px;
          color: #303133;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
